<template>
  <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="物流信息" :style="{ width: props.width + 'px' }" @update:show="handleUpdateShow">
    <n-spin :show="modalLoading" content-class="modal-content-box">
      <n-timeline>
        <n-timeline-item
          v-for="(item, index) in logiInfo?.list ?? []"
          :key="index"
          :type="['3', '301', '302', '303', '304'].includes(item.logiStCd) ? 'success' : 'default'"
          :title="logiStCdMap.get(item.logiStCd)"
          :content="item.context"
          :time="item.ftime"
        />
      </n-timeline>
    </n-spin>
    <template #action>
      <n-space>
        <n-button @click="() => handleUpdateShow(false)">关闭</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
import { ref, unref, watch } from 'vue';
import { ordrLogiInfGet001 } from '@yanfan/bmpod-tsapi/ordr-logi-inf';
import type { OrdrLogiInfGet001Output } from '@yanfan/bmpod-tsapi/ordr-logi-inf/types.d';

defineOptions({
  name: 'LogiModal'
});

const props = withDefaults(
  defineProps<{
    show: boolean;
    width?: number;
    logiMthId: string;
    exprsNo: string;
  }>(),
  {
    show: false,
    width: 530
  }
);

const emits = defineEmits<{
  (e: 'update:show', show: boolean): void;
  (e: 'refresh'): void;
}>();

const showModal = ref<boolean>(false);
const modalLoading = ref<boolean>(false);

const logiStCdMap = new Map<string, string>([
  ['NONE', '未知'],
  ['0', '在途'],
  ['1001', '到达派件城市'],
  ['1002', '干线'],
  ['1003', '转递'],
  ['1', '揽收'],
  ['101', '已下单'],
  ['102', '待揽收'],
  ['103', '已揽收'],
  ['2', '疑难'],
  ['201', '超时未签收'],
  ['202', '超时未更新'],
  ['203', '拒收'],
  ['204', '派件异常'],
  ['205', '柜或驿站超时未取'],
  ['206', '无法联系'],
  ['207', '超区'],
  ['208', '滞留'],
  ['209', '破损'],
  ['210', '销单'],
  ['3', '签收'],
  ['301', '本人签收'],
  ['302', '派件异常后签收'],
  ['303', '代签'],
  ['304', '投柜或站签收'],
  ['4', '退签'],
  ['401', '已销单'],
  ['14', '拒签'],
  ['5', '派件'],
  ['501', '投柜或站'],
  ['6', '退回'],
  ['7', '转投'],
  ['8', '清关'],
  ['10', '待清关'],
  ['11', '清关中'],
  ['12', '已清关'],
  ['13', '清关异常']
]);

const logiInfo = ref<OrdrLogiInfGet001Output | null>(null);

watch(
  () => unref(props).show,
  (show) => {
    showModal.value = show;
    if (showModal.value) {
      if (props.logiMthId && props.exprsNo) {
        loadLogiInfo(props.logiMthId, props.exprsNo);
      } else {
        window.$message.error('参数错误');
      }
    } else {
      logiInfo.value = null;
    }
  }
);

function loadLogiInfo(logiMthId: string, exprsNo: string) {
  modalLoading.value = true;
  ordrLogiInfGet001({ logiMthId, exprsNo })
    .then((data) => {
      logiInfo.value = data;
    })
    .finally(() => {
      modalLoading.value = false;
    });
}

function handleUpdateShow(value: boolean) {
  emits('update:show', value);
}
</script>

<style lang="scss" scoped>
::v-deep(.modal-content-box) {
  max-height: 80vh;
  overflow: auto;
  padding-right: 5px;
}
</style>
